{extend name="public:base" /}
{block name="action"}
<!--<button type="button" class="btn btn-primary"><i class="fa fa-plus"></i>添加设备</button>-->
<input type="file" name="excel_files" id="excel-file-upload" style="display: none"/>
<button type="button" class="btn"> <a href="https://txz.hnwcft.com/uploads/devices.xls">下载模板</a></button>
<button type="button" class="btn btn-primary device-import-btn"><i class="fa fa-upload"></i> 设备导入</button>
{/block}
{block name="content"}
<div class="wrapper wrapper-content animated fadeInRight" xmlns="http://www.w3.org/1999/html">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-title">
                    <form method="get">
                        <div class="row">
                            <div class="col-sm-3">
                                <input placeholder="设备编号" value="{$params['device_code']}" name="device_code"
                                       type="text"
                                       autocomplete="off"
                                       class="form-control">
                            </div>
                            <div class="col-sm-4" id="dateTime">
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                            <input type="text" name="startTime" id="startTime"
                                                   value="{$params.startTime}"
                                                   readonly unselectable="on"
                                                   placeholder="开始时间"
                                                   class="form-control">
                                            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="input-group">
                                            <input type="text" name="endTime" id="endTime" value="{$params.endTime}"
                                                   placeholder="结束时间"
                                                   readonly unselectable="on"
                                                   class="form-control">
                                            <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-2">
                                <div class="input-group">
                                    <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i> 搜索
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="ibox-content">
                    <table class="table table-stripped ">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>设备编号</th>
                            <th>添加时间</th>
                            <!--<th>使用过期日期</th>
                            <th>状态</th>-->
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {notempty name="list"}
                        {volist name="list" id="vo" key="k"}
                        <tr>
                            <td>{$k}</td>
                            <td>{$vo.device_code}</td>
                            <td>{$vo.create_time}</td>
                            <!--<td>{$vo.expired_time}</td>
                            <td>{$vo.status_txt}</td>-->
                            <td class="project-actions">
                                <!--                                <a href="{:url('edit', ['id' => $vo['id']])}" class="btn btn-white btn-sm"><i-->
                                <!--                                        class="fa fa-edit"></i> 编辑 </a>-->
                                <a href="{:url('delete', ['id' => $vo['id']])}"
                                   class="btn btn-danger btn-sm ajax-del"><i class="fa fa-trash-o"></i> 删除 </a>
                            </td>
                        </tr>
                        {/volist}
                        {/notempty}
                        </tbody>
                    </table>
                    {$list->render()}

                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="__ADMIN__/js/plugins/sheet/xlsx.core.min.js"></script>
<script src="__ADMIN__/js/plugins/footable/footable.all.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        laydate.render({
            elem: "#dateTime",
            //设置开始日期、日期日期的 input 选择器
            //数组格式为 5.3.0 开始新增，之前版本直接配置 true 或任意分割字符即可
            range: ['#startTime', '#endTime']
        });

        // 读取本地excel文件
        function readWorkbookFromLocalFile(file, callback) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                var workbook = XLSX.read(data, {type: 'binary'});
                if (callback) callback(workbook);
            };
            reader.readAsBinaryString(file);
        }

        $(".device-import-btn").click(function (e) {
            openUploadDialog();
        })

        function openUploadDialog() {
            $('#excel-file-upload').click();
        }

        $("#excel-file-upload").on("change", function (e) {
            var index = layer.load(0, {shade: false});

            readWorkbookFromLocalFile($(e.currentTarget)[0].files[0], function (workbook) {
                var sheetNames = workbook.SheetNames;
                var sheet = workbook.Sheets[sheetNames[0]];
                var data = XLSX.utils.sheet_to_json(sheet);
                var data_json = JSON.stringify(data);
                $.ajax({
                    url: "{:url('import',[],'json')}",
                    type: "post",
                    data: {data: data_json},
                    dataType: "json",
                    success: function (res) {
                        if (res.code === 1) {
                            layer.close(index);
                            toast.success(res.msg, {duration: res.wait * 1000}).then(function () {
                                window.location.reload();
                            });
                        } else if (res.code === 5001001) {
                            toast.error(res.msg, {duration: 3000})
                            new ModalDialog({
                                title: '导入失败',
                                content: "<div style='color: red;font-size: 20px;'>以下设备号重复</div><div>" + res.data.value.join("<br>") + "</div>",
                                closeBtn: false,
                            }).show();
                            layer.close(index);
                        } else {
                            toast.error(res.msg, {duration: res.wait * 1000});
                        }
                    }
                });
            });
        });

        // 读取 excel文件
        function outputWorkbook(workbook) {
            var sheetNames = workbook.SheetNames; // 工作表名称集合
            sheetNames.forEach(name => {
                var worksheet = workbook.Sheets[name]; // 只能通过工作表名称来获取指定工作表
                for (var key in worksheet) {
                    // v是读取单元格的原始值
                    console.log(key, key[0] === '!' ? worksheet[key] : worksheet[key].v);
                }
            });
        }

        // 从网络上读取某个excel文件，url必须同域，否则报错
        function readWorkbookFromRemoteFile(url, callback) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', url, true);
            xhr.responseType = 'arraybuffer';
            xhr.onload = function (e) {
                if (xhr.status === 200) {
                    var data = new Uint8Array(xhr.response)
                    var workbook = XLSX.read(data, {type: 'array'});
                    if (callback) callback(workbook);
                }
            };
            xhr.send();
        }
    });
</script>
<style type="text/css">

</style>
{/block}